<template>
  <!-- <h1>专技人才迁入主要内容</h1> -->
  <div class="shenheshauxin">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      style="margin-bottom: 0px"
    >
      <el-tab-pane @tab-click="getCon()" label="未审核" name="first">
        <div class="sousuokuang">
          <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-input
              v-model="sizeForm.activity"
              placeholder="职称评审活动"
            ></el-input>
            <el-input
              v-model="sizeForm.name"
              placeholder="专技人员名称"
            ></el-input>
            <el-input
              v-model="sizeForm.num"
              placeholder="身份证号码"
            ></el-input>
            <el-select v-model="sizeForm.region1" placeholder="性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
            <el-select v-model="sizeForm.region2" placeholder="申报专技系列">
              <el-option label="社会人员" value="社会人员"></el-option>
              <el-option label="教师" value="教师"></el-option>
              <el-option label="学生" value="学生"></el-option>
            </el-select>
            <el-input
              v-model="sizeForm.QualificationName"
              placeholder="申报专技资格名称"
            ></el-input>
            <el-input
              v-model="sizeForm.ProfessionalQualification"
              placeholder="申报资格专业"
            ></el-input>
            <el-select v-model="sizeForm.region3" placeholder="申报专技级别">
              <el-option label="初级" value="初级"></el-option>
              <el-option label="中级" value="中级"></el-option>
              <el-option label="高级" value="高级"></el-option>
            </el-select>
            <div
              class="block"
              style="width: 200px; display: inline-block; text-align: center"
            >
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <el-form-item size="large">
              <el-button type="primary" @click="onqueryone">查询</el-button>
              <el-button  @click="resetForm('sizeForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="xianshi">
          <el-button type="primary" @click="adopts">批量通过</el-button>
          <el-button type="primary" @click="rejects">批量驳回</el-button>
          <div style="margin: 5px 5px">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"> </el-table-column>
              <el-table-column prop="sponsornum" type="index" label="编号" width="50">
              </el-table-column>
              <el-table-column prop="declarationTime" label="申报时间">
              </el-table-column>
              <el-table-column prop="sponsorInformation"  label="发起人信息">
              </el-table-column>
              <el-table-column prop="gender" label="性别" width="50">
              </el-table-column>
              <el-table-column prop="specialTechnologySeries" label="申报专技系列">
              </el-table-column>
              <el-table-column prop="declarationQualificationMajor" label="申报资格专业">
              </el-table-column>
              <el-table-column prop="nameOfSpecialSkillDeclaration" label="申报资格名称">
              </el-table-column>
              <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                  <el-button type="text" size="medium" @click.native.prevent="pass(scope.$index, tableData)"
                    >通过</el-button
                  >
                  <el-button type="text" size="medium" @click="miss"
                    >驳回</el-button
                  >
                  <el-button type="text" size="medium" @click="details"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div>
      <el-pagination background layout="prev, pager, next" :total="total"
        :page-size="limit" @current-change="change" @prev-click="prev" @next-click="next">
      </el-pagination>
    </div>
      </el-tab-pane>
      <el-tab-pane @tab-click="getNewCon()" label="已审核" name="second">
        <div class="sousuokuang">
          <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-input
              v-model="sizeForm.activity1"
              placeholder="职称评审活动"
            ></el-input>
            <el-input
              v-model="sizeForm.name1"
              placeholder="专技人员名称"
            ></el-input>
            <el-input
              v-model="sizeForm.num1"
              placeholder="身份证号码"
            ></el-input>
            <el-select v-model="sizeForm.region4" placeholder="性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
            <el-select v-model="sizeForm.region5" placeholder="申报专技系列">
              <el-option label="社会人员" value="社会人员"></el-option>
              <el-option label="教师" value="教师"></el-option>
              <el-option label="学生" value="学生"></el-option>
            </el-select>
            <el-input
              v-model="sizeForm.QualificationName1"
              placeholder="申报专技资格名称"
            ></el-input>
            <el-input
              v-model="sizeForm.ProfessionalQualification1"
              placeholder="申报资格专业"
            ></el-input>
            <el-select v-model="sizeForm.region6" placeholder="申报专技级别">
              <el-option label="初级" value="初级"></el-option>
              <el-option label="中级" value="中级"></el-option>
              <el-option label="高级" value="高级"></el-option>
            </el-select>
            <el-select v-model="sizeForm.region2" placeholder="审核状态">
              <el-option label="通过" value="通过"></el-option>
              <el-option label="驳回" value="驳回"></el-option>
            </el-select>
            <div
              class="block"
              style="width: 200px; display: inline-block; text-align: center"
            >
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <el-form-item size="large">
              <el-button type="primary" @click="onquerytwo">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="xianshi">
          <div style="margin: 0px 5px">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"> </el-table-column>
              <el-table-column prop="sponsornum" type="index" label="编号" width="50">
              </el-table-column>
              <el-table-column prop="declarationTime" label="申报时间">
              </el-table-column>
              <el-table-column prop="sponsorInformation" label="发起人信息">
              </el-table-column>
              <el-table-column prop="gender" label="性别" width="50">
              </el-table-column>
              <el-table-column prop="specialTechnologySeries" label="申报专技系列">
              </el-table-column>
              <el-table-column prop="declarationQualificationMajor" label="申报资格专业">
              </el-table-column>
              <el-table-column prop="approvalStatus" label="审核状态">
              </el-table-column>
              <el-table-column prop="nameOfSpecialSkillDeclaration" label="申报资格名称">
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template>
                  <el-button type="text" size="medium" @click="details"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div>
      <el-pagination background layout="prev, pager, next" :total="total"
        :page-size="limit" @current-change="change1" @prev-click="prev1" @next-click="next1">
      </el-pagination>
    </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
export default {
  data() {
    return {
      page:1,
      limit:5,
        total: 0,
        tableData: [],
        //表格id
      activeName: "first",
      sizeForm: {
        activity: "",
        name: "",
        num: "",
        region3: "",
        region1: "",
        region2: "",
        QualificationName: "",
        ProfessionalQualification: "",
        activity1: "",
        name1: "",
        num1: "",
        region4: "",
        region5: "",
        region6: "",
        QualificationName1: "",
        ProfessionalQualification1: "",
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    //渲染未审核 页面
    getCon() {
      this.$axios({
        url: "/PTDF/querynotapproved",
        method:'post',
        data: {
          pid:this.pid,
          page: this.page,
          limit: this.limit
        },
      }).then(res => {
        // console.log(111, res.data.data);
        this.tableData = res.data.data;
        this.total = res.data.count;
      })
    },
    //渲染已审核页面
    getNewCon(){
      this.$axios({
        url: "/PTDF/queryapproved",
        method:'post',
        data: {
          pid:this.pid,
          page: this.page,
          limit: this.limit
        },
      }).then(res => {
        // console.log(111, res.data.data);
        this.tableData = res.data.data;
        this.total = res.data.count;
      })
    },
    change(page){
      this.page=page;
      this.getCon();
    },
    change1(page){
      this.page=page;
      this.getNewCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    prev1() {
      this.page--;
      this.getNewCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    next1() {
      this.page++;
      this.getNewCon();
    },
    //批量通过
    adopts(){
      this.$axios({
        url:'PTDF/modify',
        method:'post',
        data:{
          operation:"通过",
          approvalStatus:"通过"
        }
      })
    },
    //批量驳回
    rejects(){

    },
    handleClick(tab, event) {
      console.log(tab, event);
     if(name=="first"){
       this.getCon();
     }else{
       this.getNewCon();
     }
    },
    onqueryone() {
      this.$axios({
        url: "/PTDF/querynotapproved",
        method:'post',
        data: {
            professionalTitleActivity:this.sizeForm.activity,  //职称评审活动
            sponsorInformation:this.sizeForm.name,  //专技人员名称
            documentNumber: this.sizeForm.num,  //身份证号码
            gender:this.sizeForm.region1,  //性别
            specialTechnologySeries: this.sizeForm.region2,  //申报专技系列
            nameOfSpecialSkillDeclaration: this.sizeForm.QualificationName,  //申报专技资格名称
            declarationQualificationMajor: this.sizeForm.ProfessionalQualification,  //申报资格专业
            specialSkillLevel: this.sizeForm.region3,  //申报专技级别
            startTime:this.value1,  //起始日期
            endTime: this.value1,  //截止日期
            page: this.page,
            limit: this.limit,
        }
      }).then(res => {
        // console.log(111, res.data.data);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
   onquerytwo() {
      console.log("正在查询!");
      this.$axios({
        url: "/PTDF/queryapproved",
        method:'post',
        data: {
            professionalTitleActivity:this.sizeForm.activity1,  //职称评审活动
            sponsorInformation:this.sizeForm.name1,  //专技人员名称
            documentNumber: this.sizeForm.num1,  //身份证号码
            gender:this.sizeForm.region4,  //性别
            specialTechnologySeries: this.sizeForm.region5,  //申报专技系列
            nameOfSpecialSkillDeclaration: this.sizeForm.QualificationName1,  //申报专技资格名称
            declarationQualificationMajor: this.sizeForm.ProfessionalQualification1,  //申报资格专业
            specialSkillLevel: this.sizeForm.region6,  //申报专技级别
            startTime:this.value2,  //起始日期
            endTime: this.value2,  //截止日期
            approvalStatus:this.approvalStatus,//审批状态
            page: this.page,
            limit: this.limit,
        }
      }).then(res => {
        // console.log(111, res.data.data);
        this.tableData = res.data.data;
        this.total= res.data.count;
      });
      this.getNewCon();
    },
    resetForm() {
      this.sizeForm.activity="",  //职称评审活动
      this.sizeForm.name="",  //专技人员名称
      this.sizeForm.num="",  //身份证号码
      this.sizeForm.region1="",  //性别
      this.sizeForm.region2="",  //申报专技系列
      this.sizeForm.QualificationName="",  //申报专技资格名称
      this.sizeForm.ProfessionalQualification="",  //申报资格专业
      this.sizeForm.region3="",  //申报专技级别
      this.value1="",  //起始日期
      this.value1=""  //截止日期
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    pass(index,data) {
      this.$confirm("是否确认通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
            url:"/PTDF/modify",
            method:'post',
            data:{
            pid:data[index].pid,
            operation:"通过",
            approvalStatus:"通过",
            count:this.count,
            limit:this.limit
          },
        })
          console.log(data[index].pid,operation,approvalStatus)
      })
      .then(res => {
        console.log(res)
          this.$message({
            type: "success",
            message: "通过成功!",
            });
             this.getCon();
        })
        .catch(res => {
          console.log(res)
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    miss() {
      this.$prompt("是否确认审批驳回" + "</br><h4>驳回原因</h4>", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: "资料不全或者专业不符",
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "驳回成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消驳回",
          });
        });
    },
    details() {
      this.$router.push("/ApprovalManagement/Details1");
    },
  },
  mounted(){
    this.getCon();
    sessionStorage.setItem('fName','AppManger2');
  },
};
</script>

<style lang="less" scoped>
// 将 dangerouslyUseHTMLString属性设置为 true， message就会被当作 HTML 片段处理，就可使用</br>进行换行
* {
  padding: 0;
  margin: 0;
}
.el-pagination {
  text-align: center;
}
.el-form-item {
  float: right;
  margin: 5px 10px;
  height: 40px;
}
.el-button {
  width: 60px;
  height: 28px;
  font: size 28px;
}
.el-select {
  margin: 8px 18px 8px;
  text-align: left;
}
.el-input {
  width: 150px;
  height: 30px;
  margin: 8px 18px 8px;
  text-align: left;
}
body,
html,
#app,
el-aside {
  height: 100%;
}
.InternalNavigation {
  margin: 0px;
  width: 100%;
  height: 50px;
  background-color: rgba(242, 242, 242, 1);
}
.xianshi {
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(242, 242, 242, 1);
}
.shenheshauxin {
  height: 100%;
  width: 100%;
}
.sousuokuang {
  width: 100%;
  height: 126px;
  background-color: rgba(242, 242, 242, 0.5);
}
.el-container,
.el-menu {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  line-height: 20px;
  margin: 5px 20px 5px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>